<template>
  <div class="about">
    <div class="common-layout">
      <!-- 外层容器 -->
      <el-container>
        <!-- 侧边容器 -->
        <el-aside width="200px">Aside</el-aside>
        <!-- 外层容器 -->
        <el-container>
          <!-- 顶栏容器 -->
          <el-header>Header</el-header>
          <!-- 主体内容 -->
          <el-main>Main</el-main>
          <!-- 底部容器 -->
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
.about{
  .el-container{
  .el-aside{
    background-color: red;
    min-height: 100vh;
  }
  .el-container{
    .el-header{
      background-color: aqua;
    }
    .el-main{
      background-color: orange;
    }
    .el-footer{
      background-color: gray;
    }
  }

 }
}

</style>
